import React from 'react';
import {connect} from 'react-redux';

import {
  Text,
  TextInput,
  View,
  ScrollView,
  Image,
  InteractionManager,
  TouchableOpacity,
  Platform,
  KeyboardAvoidingView
} from 'react-native';

import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import StepInfo from '../product/stepInfo';
import theme from '../../config/theme';
import {naviPush} from '../../navigatorApp/actions'
import identityCard from './identityCard';
import {changeAuthInfo} from '../shop/actions';
import NetUtil from '../../common/NetUtil';
import config from '../../config/config';
import {toast} from '../../utils/NativeUtil';

class ShopAuth extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      codeText: '点此获取'
    };
  }

  static navigationOptions = ({navigation, screenProps}) => {
    let header = (<CLNavigatorHeader navigation={navigation} title="店铺认证"/>);
    return {header}
  };

  requestCode = () => {
    if (this.state.codeText != '点此获取') {
      return
    }

    var self = this;
    let url = '/s/sms/shop_certify';
    
    const params = {
      token: self.props.token,
    };

    NetUtil.postSign(config.apiUrl + url, params, function (res) {
      if (res.success) {
        toast('获取成功');
        let time = 120;
        self.setState({codeText: time + 's'});
        self.timer = setInterval(function () {
          time--;
          self.setState({codeText: time + 's'});
          if (time <= 0) {
            clearInterval(self.timer);
            self.setState({codeText: '点此获取'});
          }
        }, 1000)
      } else {
      }
    });
  }

  gotoNext = () => {
    if (this.props.authName == '' || this.props.authName == undefined) {
      toast('请输入您的姓名');
      return;
    }

    if (this.props.ownerCardNumber == '' || this.props.ownerCardNumber == undefined) {
      toast('请输入您的身份证号');
      return;
    }

    if (this.state.identityCode == '' || this.state.identityCode == undefined) {
      toast('请输入手机验证码');
      return;
    }

    var self = this;
    let url = '/s/shop_certification/save';
    
    const params = {
      token: self.props.token,
      ownerName: self.props.authName,
      ownerCardNumber: self.props.ownerCardNumber,
      smsCode: self.state.identityCode
    };

    NetUtil.postSign(config.apiUrl + url, params, function (res) {
      if (res.success) {
        self.props.naviPush('identityCard', {smsCode: self.state.identityCode});
      } else {
      }
    });
    
  }

  render() {
    return (
      <View style={{flex: 1, paddingLeft: 15, paddingRight: 15}}>
      <KeyboardAvoidingView style={{flex: 1}} behavior={(Platform.OS === 'ios') ? 'padding' : ''}
                                      keyboardVerticalOffset={ 64 }>
    <ScrollView showsVerticalScrollIndicator={false}> 
      <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10, marginBottom: 5}}>
        <Image style={{width: 20, height: 20, marginRight: 10}} source={require('../../image/img_shopAuth_info.png')}/>
        <Text>请填写您的真实信息，一经通过将无法修改</Text>
      </View>
      <StepInfo step={2} index={0}/>
      <View style={{
              flexDirection: 'row',
              alignItems: 'center',
              borderWidth: 1,
              borderRadius: 5,
              borderColor: '#ddd',
              backgroundColor: 'white',
              height: 40,
              marginTop: 10
            }}>
      <Text style={{marginLeft: 10}}>店主姓名</Text>
      <View style={{marginLeft: 10, width: 1, height: 20, backgroundColor: '#ddd'}}/>
      <TextInput
        style={{
          flex: 1,
          marginLeft: 10,
          marginRight: 10
        }}
        placeholder='请与身份证保持一致'
        value={this.props.authName}
        underlineColorAndroid={'transparent'}
        textAlign='left'
        writingDirection='rtl'
        onChangeText={(text) => this.props.changeAuthInfo({authName: text})}
        returnKeyType='done'
        multiline={false}
      />
      </View>
      <View style={{
              flexDirection: 'row',
              alignItems: 'center',
              borderWidth: 1,
              borderRadius: 5,
              borderColor: '#ddd',
              backgroundColor: 'white',
              height: 40,
              marginTop: 10
            }}>
      <Text style={{marginLeft: 10}}>身份证号</Text>
      <View style={{marginLeft: 10, width: 1, height: 20, backgroundColor: '#ddd'}}/>
      <TextInput
        style={{
          flex: 1,
          marginLeft: 10,
          marginRight: 10
        }}
        placeholder='请输入身份证号'
        value={this.props.ownerCardNumber}
        underlineColorAndroid={'transparent'}
        textAlign='left'
        writingDirection='rtl'
        onChangeText={(text) => this.props.changeAuthInfo({ownerCardNumber: text})}
        returnKeyType='done'
        multiline={false}
      />
      </View>
      <View style={{
              borderWidth: 1,
              borderRadius: 5,
              borderColor: '#ddd',
              backgroundColor: 'white',
              height: 80,
              marginTop: 10
            }}>
      <View style={{height: 40, flexDirection: 'row', alignItems: 'center'}}>
      <Text style={{marginLeft: 10}}>手机号码</Text>
      <View style={{marginLeft: 10, width: 1, height: 20, backgroundColor: '#ddd'}}/>
      <TextInput
        style={{
          flex: 1,
          marginLeft: 10,
          marginRight: 10
        }}
        placeholder='请输入手机号'
        value={this.props.auditPhone}
        editable={false}
        underlineColorAndroid={'transparent'}
        textAlign='left'
        writingDirection='rtl'
        onChangeText={(text) => this.setState({phone: text})}
        returnKeyType='done'
        multiline={false}
        keyboardType='numeric'
      />
      </View>
      <View style={{height: 1, backgroundColor: '#ddd'}}/>
      <View style={{height: 40, flexDirection: 'row', alignItems: 'center'}}>
      <TextInput
        style={{
          flex: 1,
          marginLeft: 10,
          marginRight: 5
        }}
        placeholder='请输入验证码'
        value={this.state.identityCode}
        underlineColorAndroid={'transparent'}
        textAlign='left'
        writingDirection='rtl'
        onChangeText={(text) => this.setState({identityCode: text})}
        returnKeyType='done'
        multiline={false}
      />
      <TouchableOpacity onPress={() => {
        this.requestCode();
      }}>
        <View style={{width: 80, alignItems: 'center', justifyContent: 'center', marginRight: 10}}>
          <Text style={{color: 'red', fontSize: 16}}>{this.state.codeText}</Text>
        </View>
      </TouchableOpacity>
      </View>
      </View>
      <TouchableOpacity onPress={() => {
        this.gotoNext();
      }}>
        <View style={{height: 40, marginTop: 50, marginLeft: 30, marginRight: 30, marginBottom: 10, backgroundColor: theme.maincolor, borderRadius: 5, alignItems: 'center', justifyContent: 'center'}}>
          <Text style={{color: 'white', fontSize: 18}}>下一步</Text>
        </View>
      </TouchableOpacity>
    </ScrollView>
    </KeyboardAvoidingView>
    </View>
    )
  }
}


const mapStateToProps = state => ({
  token: state.mainmodel.token,
  authName: state.shop.authName,
  ownerCardNumber: state.shop.ownerCardNumber,
  auditPhone: state.shop.auditPhone
});

const mapDispatchToProps = dispatch => ({
  naviPush:(routerName, params) => {
    dispatch(naviPush(routerName, params))
  },
  changeAuthInfo: (changedInfo) => {
    dispatch(changeAuthInfo(changedInfo))
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(ShopAuth);
